<template>
  <div>
    <div class="image-container">
      <div class="image-item" v-for="(imageUrl, index) in images" :key="index">
        <el-image :src="imageUrl" :preview-src-list="images" alt="Image" :lazy="true"/>
      </div>
    </div>
    <!-- 分页组件的容器 -->
    <div class="pagination-container">
      <el-pagination
          background
          v-if="totalImages > 0"
          layout="prev, pager, next"
          @current-change="handlePageChange"
          :page-size="15"
          :total="totalImages">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    images: {
      type: Array,
      required: true
    },
    totalImages: Number
  },
  methods: {
    handlePageChange(newPage) {
      // 发射事件
      this.$emit('page-changed', newPage);
    },
  }
}
</script>

<style scoped>
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 确保图片从左边开始排列 */
  align-items: flex-start; /* 确保图片从顶部开始排列 */
  margin-left: -10px; /* 抵消图片之间的间距 */
  margin-top: -10px; /* 抵消图片之间的间距 */
}

.image-item {
  width: calc(33.33% - 10px); /* 减去10px以保持图片之间的间距 */
  height: 240px;
  margin-left: 10px; /* 设置图片之间的水平间距 */
  margin-top: 10px; /* 设置图片之间的垂直间距 */
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.el-image {
  display: block; /* 防止图片下方出现空白 */
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block; /* 这可以移除图片下方的空白 */
}

.image-item:hover {
  transform: scale(1.1);
}

.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 20px; /* 与图片列表之间的间距 */
}
</style>